<!DOCTYPE html>
<html>
  <head>
     <link rel='stylesheet' href='/stylesheets/chatting.css' />
     <link rel='stylesheet' href='/stylesheets/setting.css' />

      <script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
      <script type="module" src="javascripts/owl-music.js"></script>
      <script type="module" src="javascripts/owl-air.js"></script>

      <script type="module" src="javascripts/owl-meteor.js"></script>
      <script src="/socket.io/socket.io.js"></script>

  </head>

  <style>

    *{

      margin: 0px;
      padding: 0px;
    }

    body{

      margin: 0px;
      padding: 0px;
    }

    #visibleBox{

      width: 100%;
      background: black;
      height: 400px;

    }

    #title_info{

      color: white;
      font-size: 2.4rem;
      text-align: center;
      padding:12px;
    }

    #innerBox{

      width: 100%;
      background-color: black;
      display: flex;

    }

    #chattingBox{

      width: 48%;
      /*background-color: rgba(120,120,120,0.2);*/
        background-color: black;
      overflow: scroll;
    }
    #chattingBox::-webkit-scrollbar { display: none; }

    #new_info{

        width: 26%;
        height: 100%;
        background-color: black;
        overflow: hidden;
    }

    #new_info .tit{

        color: grey;
        font-size: 0.8rem;
        text-align: center;
        padding: 4px;
    }
      .author{

         color: grey;
         font-size: 0.8rem;
          padding-top: 4px;
          padding-left: 16px;
     }

      #new_info .author_info{

          display: flex;
          width: 86%;
          height: 80px;
          margin-left: 6%;
      }

    #new_info .author_info img{
        margin-top: 8px;
        width: 60px;
        height:60px;
        border-radius: 2px;
        box-shadow: 0.1px 0.2px 3px 0.4px rgba(120,120,102,0.6);
    }

    #new_info .author_info .author_name{

        width: calc(100% - 60px - 6px);
        font-size: 0.8rem;
        color: grey;
        /*background-color: yellow;*/
        position: relative;
        margin-left: 6px;
    }

    .author_name .name{

        padding-top: 10px;
        padding-left: 4px;
        font-size: 1.0rem;
    }

    .author_name .createtime{

        padding-top: 4px;
        padding-left: 4px;
        font-size: 0.8rem;
    }

    #new_info .topic{

        width: calc(86% - 16px);
        height: 104px;
        padding: 8px;
        /*background-color: grey;*/
        margin-left: 6%;
        border: 1px solid rgba(120,120,120,0.8);
        border-radius: 6px;
        box-shadow: 0px 1px 2px 0.4px rgba(120,120,120,0.2);
        margin-bottom: 12px;
        color: white;
    }

    #setingBox{

        width: 26%;
        height: 100%;
        overflow: hidden;
        /*background-color: gold;*/
    }

    #setingBoxs{

        width: 26%;
        height: 100%;
        overflow: hidden;
        /*background-color: gold;*/
    }

      #addbtn{

          width: 36px;
          height: 36px;
          /*background-color: aquamarine;*/
          border-radius: 50%;
          border: 2px solid white;
          position: absolute;
          box-shadow: 0.2px 0.2px 4px 0.4px rgba(120,100,120,0.3);
          z-index: 120;
      }
      #addbtn img{

          width: 24px;
          height: 24px;
          position: relative;
          left: 50%;
          margin-left: -12px;
          transition: all ease 0.2s;
          margin-top: 6px;
      }

      #anotherBox{

          width: 100%;
          height: 356px;
          /*background-color: rgba(120,120,120,0.5);*/
      }

    #anotherBox #beforeBox{

        display: inline-block;
        width: 86%;
        height: 60px;
        margin-left: 6%;
        /*background-color: ;*/
        border-radius: 4px;
        margin-top: 6px;
        margin-bottom: 6px;
        cursor: pointer;
        /*box-shadow: 0.1px 0.1px 2px 0.1px rgba(120,120,120,0.4);*/
        /*display: flex;*/
    }

    #anotherBox #beforeBox:active{

        opacity: 0.6;
    }
    #beforeBox img{

        width: 30px;
        height: 30px;
        position: relative;
        top: 50%;
        margin-top: -15px;
        margin-left: 8px;

    }

    .beforeBoxs{

        display: inline-block;
        width: 86%;
        height: 60px;
        margin-left: 6%;
        /*background-color: ;*/
        border-radius: 4px;
        margin-top: 6px;
        margin-bottom: 6px;
        /*cursor: pointer;*/

    }
    #beforeBox p{

        padding-top: 22px;
        padding-left: 4px;
        color: rgba(120,120,120,0.9);

    }
    #hiddenBox{

        width: calc(100% - 4px);
        height: 280px;
        background-color:rgba(0,0,0,0.6);
        position: relative;
        border: 2px solid white;
        /*margin-top: 200px;*/
        z-index: 100;
        margin-top: 50px;
        transition:  all ease-in 0.2s;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
   #hiddenBox p{

       padding-top: 12px;
       text-align: center;
       color: white;
   }

    #hiddenBox .inputs{

        width: calc(80% - 16px);
        margin-left: 10%;
        padding: 8px;
        margin-top: 12px;
        font-size: 0.8rem;
        border-radius: 4px;
        outline: none;
        background-color:rgba(10,0,0,0);
        border: 1px solid rgba(255,255,255,0.8);
        color: white;
    }

      #hiddenBox .toptype{

          margin-bottom: 8px;
          width: 80%;
          height: 28px;
          /*background-color: bisque;*/
          margin-left: 10%;
          display: flex;
      }

      #hiddenBox .toptype .item{

          width: 20%;
          height: calc(100% - 4px);
          border-radius: 4px;
          background-color: gainsboro;
          margin-left: 2px;
          margin-right: 2px;
          padding-top: 4px;
          text-align: center;
          color: gray;
          cursor: pointer;
      }

      #hiddenBox #postbtn {

          width: 60px;
          height: 32px;
          /*background-color: #00B7FF;*/
          border-radius: 4px;
          border: 1px solid white;
          color: white;
          position: relative;
          left: 100%;
          margin-left: -70px;
          box-shadow: 0.1px 0.2px 0.4px 0.4px rgba(120,120,120,0.6);
          cursor: default;
      }

    #hiddenBox #postbtn:active{

        opacity: 0.6;
    }

  </style>
  <body>
  <!--<script>-->
      <!--var socket = io();-->
  <!--</script>-->

  <owl-air></owl-air>
  <!--<owl-meteor></owl-meteor>-->
   <div id="visibleBox">

     <p id="title_info">Owl</p>

     <div id="innerBox">
        <div id="new_info">
            <p class="tit">今日话题</p>
            <div class="topic" id="currentTopic" style="text-align: center">
                hellow

            </div>
            <p class="author">话题者</p>
            <div class="author_info">
              <img src="images/p5.jpg" id="face">
                <div class="author_name">
                    <p class="name" id="topname">hello syi</p>
                    <p class="createtime" id="topcreate">2018/8/12 23:00</p>
                    <!--<p class="label">话痨</p>-->
                </div>
            </div>

            <!--<p class="author" id="online">当前在线人数:<span style="color: #00B7FF"> 30</span></p>-->

            <div id="anotherBox">

                <div id="beforeBox">
                    <div style="width: 100%;display: flex;height: 100%">
                        <img src="images/chatting.png">
                        <p>时间轴长度... <span style="color: white" id="lenTag">2</span></p>
                    </div>
                </div>

                <div class="beforeBoxs">

                    <owl-music audiotitle="舍得--王呈章" audiosrc="music/a.mp3" imgsrc="images/wcz.jpg" titlecolor="rgb(255,255,255)" progcolor="rgb(255,255,255)"></owl-music>
                </div>
            </div>


            <div id="addbtn">
                <img src="images/addpic.png">
            </div>

            <div id="hiddenBox">
                <p>创建明晚话题</p>

                <textarea id="inputs" class="inputs" placeholder="话题大概" rows="3" value="" ></textarea>
                <br>

                <p id="warmInfp" style="color: white!important;font-size: 0.6rem;text-align: center">""</p>
                <div id="postbtn" style="margin-top: 24px!important;"><p style="text-align: center;padding-top: 6px">提交</p></div>

            </div>
            
        </div>
        <div id="chattingBox" style="transition: all ease-out 0.4s">

            <div class="fasetCtrl" id="topdownCtrl">
                <div id="up" >
                    <img tag="up" src="images/up.png">
                </div>
                <div  id="down">
                    <img tag="down" src="images/down.png">
                </div>

            </div>

            <div id="innerLine"></div>



            <div class="line" id="lineBox">
                <div class="chattingboxleft clearfix">

                    <div class="headerface">
                            <img src="images/face4.jpg">
                    </div>
                    <p class="createname" >与时间赛跑  </p>
                    <p class="createtime">.....</p>
                    <div class="chattingcontent">
                     欢迎加入owl_cat
                    </div>
                </div>


                <div class="chattingboxright clearfix">
                    <div class="headerface">
                        <img src="images/face7.jpg">
                    </div>
                    <p class="createname">createName  </p>
                    <p class="createtime">2018.08.12  </p>
                    <div class="chattingcontent">hello</div>
                </div>

            </div>

        </div>

         <% if (user.login) { %>
        <div id="setingBox" style="display: block">

            <div class="myuserface">
                <div class="editBox"><img src="images/ediths.png" id="toedit"></div>
                <img class="img" src="<%= user.face%>" id="currentFace"/>
                <p class="fname" id="username"><%= user.nick %></p>

                <p class="fname" id="userTag"><%= user.number %></p>
            </div>

            <div class="moreset">

                <div class="moreheaderface" id="changeFace">
                    <div class="itemface"> <img src="images/face1.jpg"> </div>
                    <div class="itemface">  <img src="images/face2.jpg"></div>
                    <div class="itemface">  <img src="images/face3.jpg"></div>
                    <div class="itemface">  <img src="images/face4.jpg"></div>
                    <div class="itemface">  <img src="images/face5.jpg"></div>
                    <div class="itemface">  <img src="images/face6.jpg"></div>
                    <div class="itemface">  <img src="images/face7.jpg"></div>
                    <div class="itemface">  <img src="images/face8.jpg"></div>
                    <div class="itemface">  <img src="images/face9.jpg"></div>
                    <div class="itemface">  <img src="images/addface.png" id="addf"></div>
                </div>

            </div>

            <div class="inputBoxs">
                <textarea placeholder="说点什么吧....." rows="3" id="chatInput"></textarea>
                <div style="width: 86%;margin-left:6%;display: flex">
                    <div style="width: 30px;height: 30px;">
                        <img id="emjss" style="margin-top: 4px;width: 100%;height: 100%" src="images/emoj.png">
                    </div>
                    <div id="senfBtn"><p>send</p></div>
                </div>

            </div>


            <div class="aboutme" id="aboutme">
                <div style="width: 100%;height: 50px">
                    <img class="imggg" src="images/moreme.png" tag="0">
                    <img class="imggg"  src="images/github-2.png" tag="1">
                </div>
                
                <div class="cat">
                    <img src="images/cat_ps.png">
                </div>
            </div>

            <div style="width: 100%;height: auto;position: relative;margin-top: 260px;transition: all ease-out 0.2s" id="emjHideBox">
            <div class="emj" id="emjBox">
                <div class="itememj">😀</div>
            </div>

            <div class="selectEmj">
                <div style="width:64px;display: flex;position: relative;left: 50%;margin-left: -32px ">
                    <div  class="bef" id="bef" ><img src="images/next-1.png" id="0"></div>
                    <a style="color: white" id="pageIndex">1</a>
                    <div class="befs" id="next" ><img src="images/next-2.png" id="1"></div>
                </div>
            </div>
            </div>
        </div>
         <% } %>

         <% if (user.sign) { %>
         <div id="setingBoxs" >


             <div style="width: 100%">
                 <img style="width: 80px;" src="images/cat_ps.png">
             </div>
             <p style="text-align: center;color: white;font-size: 1.2rem">登录 or 注册</p>

             <div>
                 <input id="number" oninput="check(value)" class="toLogi" placeholder="用户名(手机号或者邮箱..只要你记得住)">
                 <input id="pass" oninput="checks(value)" class="toLogi" placeholder="密码...." type="password">
                 <input id="nick" oninput="checkss(value)" class="toLogi" placeholder="初次加入请输入昵称...." type="text">

                 <div style="width: 100%;height:30px;" >



                     <div class="loginbtn" id="loginBtn" style="margin-right: 48px"  >
                         <p tag="0" style="color: white;text-align: center;font-size: 0.8rem;padding-top: 4px">登录</p>
                     </div>

                     <div class="loginbtn" id="loginBtns" style="margin-right: 12px">
                         <p tag="1" style="color: white;text-align: center;font-size: 0.8rem;padding-top: 4px">注册</p>
                     </div>

                 </div>

             </div>


             <div style="width: 86%;margin-left: 6%;height: 34px;margin-top: 12px ">
                 <img id="tipBtn" src="images/tips.png">
             </div>
             <div class="tip" id="tipBox">
                 <br>
                 由于服务器的空间有限,所以在头像的设置上不那么自由，降低了大家的体验，
                 请给我几天时间
                 <br>
                 <img src="images/fish.png" style="width: 30px">
             </div>

         </div>
         <% } %>
     </div>

   </div>

  <script>

    let currentFace="";
    let curentNickName="";
    let isOnTip=false;
    let currentIndexEnd = 60;
    let ison=false;
    let isEdit=false;
    let isSHowEmoj=false;
    var socket = io();
    let http=new XMLHttpRequest();
    let isLogin=false;


    //socket接收事件。。。
    socket.on("send", function(msg){

        let targetParent=document.getElementById("lineBox");
        let example=targetParent.children[2];
        let newItem=example.cloneNode(true);

        newItem.children[0].children[0].src=msg.userface;
        newItem.children[1].innerHTML=msg.nickname;
        newItem.children[2].innerHTML=msg.createtime;
        newItem.children[3].innerHTML=msg.chatcontent;
        targetParent.appendChild(newItem);
        ScrollToBotton();
        updateDate();
    });
    window.onload=function () {

      let target=document.getElementById("visibleBox");
      let height=window.innerHeight;
      target.style.height=height+'px';
      let innerBox=document.getElementById("innerBox");
      let titleBox=document.getElementById("title_info");
      let titleheight=titleBox.offsetHeight;
      innerBox.style.height=(height-titleheight)+"px";

        let btn=document.getElementById("addbtn");
        btn.style.top=(height-44)+"px";
        btn.style.left="8px";
        btn.addEventListener("click",addBtnclick);

        // 展示页面
       let showCard=document.getElementById("aboutme");

        if(showCard!=null){
            let pnode=document.getElementById("setingBox");
            showCard.style.width=(pnode.offsetWidth*0.86)+"px";
            showCard.style.marginLeft=pnode.offsetWidth*0.06+"px";
        }

        //提交按钮事件
        let postBtn=document.getElementById("postbtn");
        postBtn.addEventListener("click",PostTopic);

        //快速菜单的按钮控制
        let offsetHeight=document.getElementById("chattingBox").offsetHeight;
        let fastetCtrl=document.getElementById("topdownCtrl");
        fastetCtrl.style.top=(+offsetHeight-fastetCtrl.offsetHeight/2-6)+"px";

        //快捷菜单事件
        for(let g=0;g<fastetCtrl.children.length;g++){

            fastetCtrl.children[g].addEventListener("click",FaseterEvent,false);
        }

        //创建表情
        let targetBox=document.getElementById("emjBox");

        if(targetBox!=null){

            initEmj();
            isLogin=true;

            let befBtn=document.getElementById("bef");
            befBtn.addEventListener("click",SelectEmj);
            let nextBtn=document.getElementById("next");
            nextBtn.addEventListener("click",SelectEmj);

            //发送信息

            let send=document.getElementById("senfBtn");
            send.addEventListener("click",SendMsg,false);


            //编辑按钮点击事件
            let edithTarget=document.getElementById("toedit");
            edithTarget.addEventListener("click",edithEvent,false);

            //更换图片事件

            let changeFaceTarget=document.getElementById("changeFace").children;

            for(let x=0;x<changeFaceTarget.length;x++){
                changeFaceTarget[x].addEventListener("click",changeFaceEvent,false);

            }
            //展开表情盒

            let emojBoxs=document.getElementById("emjss");
            emojBoxs.addEventListener("click",ShowEmoj,false);

            let parentNodes=document.getElementById("aboutme").children[0].children;

            if(parentNodes!=null){

                for(let i=0;i<parentNodes.length;i++){

                    parentNodes[i].addEventListener("click",showMeEvent,false);
                }
            }

            getPersonInfo();

        }

        getTopic();

        let tipBtn=document.getElementById("tipBtn");

        if(tipBtn!=null){
            tipBtn.addEventListener("click",TipEvent,false);
        }

        //注册和登录

        let loginBtn=document.getElementById("loginBtn");

        if(loginBtn!=null){
            loginBtn.addEventListener("click",LoginEvent,false);
        }

        let loginBtns=document.getElementById("loginBtns");
        if(loginBtns!=null){

            loginBtns.addEventListener("click",LoginEvent,false);

        }

        // updateDate();

    };

    function check(v) {

       if(v.length<6||v.length>20){

         let target= document.getElementById("number");
           target.style.borderColor="red";
       }else{
           let target= document.getElementById("number");
           target.style.borderColor="white";
       }
    }

    function checks(v) {

        if(v.length<6||v.length>20){

            let target= document.getElementById("pass");
            target.style.borderColor="red";
        }else{
            let target= document.getElementById("pass");
            target.style.borderColor="white";
        }
    }

    function checkss(v) {

        if(v.length<2||v.length>8){

            let target= document.getElementById("nick");
            target.style.borderColor="red";
        }else{
            let target= document.getElementById("nick");
            target.style.borderColor="white";
        }
    }

    function LoginEvent(e) {

        let tag=e.target.getAttribute("tag");
        let numNode=document.getElementById("number");
        let passNode=document.getElementById("pass");
        let nickName=document.getElementById("nick");
        let num=numNode.value;
        let pass=passNode.value;
        let nickname=nickName.value;

        if((num.length>=6&&num.length<=20)&&(pass.length>=6&&pass.length<=20)){

            //发送请求

            if(tag=="0") {

                //登录操作
                let url="/toLogin?num="+num+"&pass="+pass;
                http.open("POST",url,true);
                http.send();

            }else {

                // 注册操作
                 if(nickname.length>=2&&nickname.length<=8){

                     let url="/toSign?num="+num+"&pass="+pass+"&nick="+nickname;
                     http.open("POST",url,true);
                     http.send();
                 }
            }

        }else{
            //输入错误

            return;
        }

        http.onreadystatechange=function()
        {
            if (http.readyState==4 && http.status==200)
            {

                window.location.reload();
            }
        }
    }
    function TipEvent() {
      if(!isOnTip){
          let targetBox=document.getElementById("tipBox");
          targetBox.style.maxHeight="180px";
      }else {
          let targetBox=document.getElementById("tipBox");
          targetBox.style.maxHeight="0px";
      }

      isOnTip=!isOnTip;

    }

    function  showMeEvent(e) {

        let tag=e.target.getAttribute("tag");

        if(tag=="0"){


            window.open("https://gitee.com/withtime/events")
            //去git
            // window.location=";

        }else{

            //去更多
            window.open("https://gitee.com/withtime/events")
        }
    }


    //展开表情
    function ShowEmoj() {

        let target=document.getElementById("emjHideBox");
        let aboutMe=document.getElementById("aboutme");
        if(!isSHowEmoj){

            target.style.marginTop="0px";
            aboutMe.style.opacity="0";
        }else{

            target.style.marginTop="260px";
            aboutMe.style.opacity="1";
        }
        isSHowEmoj=!isSHowEmoj;

    }


    //快捷菜单事件e
    function  FaseterEvent(e) {

        let tag=e.target.getAttribute("tag");
        let target=document.getElementById("chattingBox");
        let line=document.getElementById("lineBox");
        let lineheight=line.offsetHeight;
        let currentTopOffset=target.scrollTop;
        if(tag=="up"){
            //向上滚动

            if(currentTopOffset>=200){

                let timer=null;
                let offsetTop=0;
                timer=setInterval(()=>{

                    offsetTop+=4;
                    if(offsetTop>=200){
                        clearInterval(timer);
                        timer=null;
                    }
                    target.scrollTop=currentTopOffset-offsetTop;
                },0.4);
            }



        }else{
            //向下滚动
            if(lineheight>=(target.offsetHeight)){

                let timer=null;
                let offsetTop=0;
                timer=setInterval(()=>{

                    offsetTop+=4;
                    if(offsetTop>=200){
                        clearInterval(timer);
                        timer=null;
                    }
                    target.scrollTop=currentTopOffset+offsetTop;
                },0.4);
            }
        }



    }

    function initLayout() {


        
    }

    //滚动到最底部
    function ScrollToBotton() {


       let target=document.getElementById("chattingBox");
       let line=document.getElementById("lineBox");
       let lineheight=line.offsetHeight;
       line.style.height=lineheight+100+"px";
       let currentTopOffset=target.scrollTop;
       let timer=null;
       let offsetTop=0;
        timer=setInterval(()=>{

            offsetTop+=4;
            if(offsetTop>=100){
                clearInterval(timer);
                timer=null;
            }
            target.scrollTop=currentTopOffset+offsetTop;
       },0.4);
    }

    function  PostTopic() {

        let inputContent=document.getElementById("inputs").value;
        let infoTarget=document.getElementById("warmInfp")

        if(isLogin) {
            if (inputContent == "") {

                infoTarget.innerText = "不对诶,不对诶,内容为空？";

            } else if (inputContent.length > 200) {

                infoTarget.innerText = "话题太长了，尽量精简些吧";

            } else {

                infoTarget.innerText = "正在提交.....";
                var myDate = new Date();//获取系统当前时间
                let currentDate = myDate.toLocaleString();
                let url = "/postTopic?userface=" + currentFace + "&topiccontent=" + inputContent + "&createtime=" + currentDate + "&nickname=" + curentNickName;
                http.open("POST", url, true);
                http.send();

                http.onreadystatechange = function () {
                    if (http.readyState == 4 && http.status == 200) {

                        let resultData = JSON.parse(http.responseText);
                        let inputNodes = document.getElementById("inputs");
                        inputNodes.value = "";

                        if (resultData.status == "OK") {

                            infoTarget.innerText = "提交成功!";
                        } else if (resultData.status == "BEEN") {

                            infoTarget.innerText = "重复提交失败!";
                        } else {

                            infoTarget.innerText = "提交失败~!请重试...";
                        }
                    }
                }
            }
        }
    }

    function  addBtnclick() {

        let hiddenbox=document.getElementById("hiddenBox");
        let btn = document.getElementById("addbtn").children[0];
        if(!ison){
            btn.style.transform="rotate(0deg)";
            hiddenbox.style.marginTop=-hiddenbox.offsetHeight+30+"px";
        }else {
            btn.style.transform="rotate(-135deg)";
            hiddenbox.style.marginTop="50px";
        }
        ison=!ison;
    }

    function  SelectType(e) {

        let valueTag=e.target.getAttribute("checked");
        if(valueTag=="0"){

            e.target.setAttribute("checked","1");
            e.target.style.color="white";
            e.target.style.backgroundColor="red";
        }else{

            e.target.setAttribute("checked","0");
            e.target.style.color=" gray";
            e.target.style.backgroundColor="gainsboro";
        }
    }


    function  initEmj() {

        const EMOJIS = "😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 🤡 🤠 😏 😒 😞 😔 😟 😕 🙁" +
            " ☹️ 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 🤤 😭 😓 😪 😴 🙄 🤔 🤥 😬 🤐 🤢 🤧 😷 🤒 🤕 😈 👿" +
            " 👹 👺 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾 👐 🙌 👏 🙏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌️ 🤘 👌 👈 👉 👆 👇 ☝️ ✋ 🤚" +
            " 🖐 🖖 👋 🤙 💪 🖕 ✍️ 🤳 💅 🖖 💄 💋 👄 👅 👂 👃 👣 👁 👀 🗣 👤 👥 👶 👦 👧 👨 👩 👱‍♀️ 👱 👴 👵 👲 👳‍♀️ 👳 👮‍♀️ 👮 👷‍♀️ 👷" +
            " 💂‍♀️ 💂 🕵️‍♀️ 🕵️ 👩‍⚕️ 👨‍⚕️ 👩‍🌾 👨‍🌾 👩‍🍳 👨‍🍳 👩‍🎓 👨‍🎓 👩‍🎤 👨‍🎤 👩‍🏫 👨‍🏫 👩‍🏭 👨‍🏭 👩‍💻 👨‍💻 👩‍💼 👨‍💼 👩‍🔧 👨‍🔧 👩‍🔬 👨‍🔬" +
            " 👩‍🎨 👨‍🎨 👩‍🚒 👨‍🚒 👩‍✈️ 👨‍✈️ 👩‍🚀 👨‍🚀 👩‍⚖️ 👨‍⚖️ 🤶 🎅 👸 🤴 👰 🤵 👼 🤰 🙇‍♀️ 🙇 💁 💁‍♂️ 🙅 🙅‍♂️ 🙆 🙆‍♂️ 🙋 🙋‍♂️ 🤦‍♀️ 🤦‍♂️ 🤷‍♀" +
            "️ 🤷‍♂️ 🙎 🙎‍♂️ 🙍 🙍‍♂️ 💇 💇‍♂️ 💆 💆‍♂️ 🕴 💃 🕺 👯 👯‍♂️ 🚶‍♀️ 🚶 🏃‍♀️ 🏃 👫 👭 👬 💑 👩‍❤️‍👩 👨‍❤️‍👨 💏 👩‍❤️‍💋‍👩 👨‍❤️‍💋‍👨 👪 👨‍👩‍👧" +
            " 👨‍👩‍👧‍👦 👨‍👩‍👦‍👦 👨‍👩‍👧‍👧 👩‍👩‍👦 👩‍👩‍👧 👩‍👩‍👧‍👦 👩‍👩‍👦‍👦 👩‍👩‍👧‍👧 👨‍👨‍👦 👨‍👨‍👧 👨‍👨‍👧‍👦 👨‍👨‍👦‍👦 👨‍👨‍👧‍👧 👩‍👦 👩‍👧" +
            " 👩‍👧‍👦 👩‍👦‍👦 👩‍👧‍👧 👨‍👦 👨‍👧 👨‍👧‍👦 👨‍👦‍👦 👨‍👧‍👧 👚 👕 👖 👔 👗 👙 👘 👠 👡 👢 👞 👟 👒 🎩 🎓 👑 ⛑ 🎒 👝 👛 👜 💼 👓" +
            " 🕶 🌂 ☂️";
        let array = EMOJIS.split(' ');
        let targetBox=document.getElementById("emjBox");
        let children=targetBox.children[0];

        for(let i=1;i<60;i++){

            let item=children.cloneNode(true);
            item.innerHTML=array[i];
            targetBox.appendChild(item);
        }


        for(let i=0;i<targetBox.children.length;i++){

            targetBox.children[i].addEventListener("click",getEmj,false);

        }
    }

    function SelectEmj(e) {

        let index=e.target.id;
        const EMOJIS = "😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 🤡 🤠 😏 😒 😞 😔 😟 😕 🙁" +
            " ☹️ 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 🤤 😭 😓 😪 😴 🙄 🤔 🤥 😬 🤐 🤢 🤧 😷 🤒 🤕 😈 👿" +
            " 👹 👺 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾 👐 🙌 👏 🙏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌️ 🤘 👌 👈 👉 👆 👇 ☝️ ✋ 🤚" +
            " 🖐 🖖 👋 🤙 💪 🖕 ✍️ 🤳 💅 🖖 💄 💋 👄 👅 👂 👃 👣 👁 👀 🗣 👤 👥 👶 👦 👧 👨 👩 👱‍♀️ 👱 👴 👵 👲 👳‍♀️ 👳 👮‍♀️ 👮 👷‍♀️ 👷" +
            " 💂‍♀️ 💂 🕵️‍♀️ 🕵️ 👩‍⚕️ 👨‍⚕️ 👩‍🌾 👨‍🌾 👩‍🍳 👨‍🍳 👩‍🎓 👨‍🎓 👩‍🎤 👨‍🎤 👩‍🏫 👨‍🏫 👩‍🏭 👨‍🏭 👩‍💻 👨‍💻 👩‍💼 👨‍💼 👩‍🔧 👨‍🔧 👩‍🔬 👨‍🔬" +
            " 👩‍🎨 👨‍🎨 👩‍🚒 👨‍🚒 👩‍✈️ 👨‍✈️ 👩‍🚀 👨‍🚀 👩‍⚖️ 👨‍⚖️ 🤶 🎅 👸 🤴 👰 🤵 👼 🤰 🙇‍♀️ 🙇 💁 💁‍♂️ 🙅 🙅‍♂️ 🙆 🙆‍♂️ 🙋 🙋‍♂️ 🤦‍♀️ 🤦‍♂️ 🤷‍♀" +
            "️ 🤷‍♂️ 🙎 🙎‍♂️ 🙍 🙍‍♂️ 💇 💇‍♂️ 💆 💆‍♂️ 🕴 💃 🕺 👯 👯‍♂️ 🚶‍♀️ 🚶 🏃‍♀️ 🏃 👫 👭 👬 💑 👩‍❤️‍👩 👨‍❤️‍👨 💏 👩‍❤️‍💋‍👩 👨‍❤️‍💋‍👨 👪 👨‍👩‍👧" +
            " 👨‍👩‍👧‍👦 👨‍👩‍👦‍👦 👨‍👩‍👧‍👧 👩‍👩‍👦 👩‍👩‍👧 👩‍👩‍👧‍👦 👩‍👩‍👦‍👦 👩‍👩‍👧‍👧 👨‍👨‍👦 👨‍👨‍👧 👨‍👨‍👧‍👦 👨‍👨‍👦‍👦 👨‍👨‍👧‍👧 👩‍👦 👩‍👧" +
            " 👩‍👧‍👦 👩‍👦‍👦 👩‍👧‍👧 👨‍👦 👨‍👧 👨‍👧‍👦 👨‍👦‍👦 👨‍👧‍👧 👚 👕 👖 👔 👗 👙 👘 👠 👡 👢 👞 👟 👒 🎩 🎓 👑 ⛑ 🎒 👝 👛 👜 💼 👓" +
            " 🕶 🌂 ☂️";
        let array = EMOJIS.split(' ');
        let targetBox = document.getElementById("emjBox");
        let childrens = targetBox.children;

        // console.log(index+"-");
        if (index == "0") {

         if(currentIndexEnd-60>=60){

                 let tempIndex=currentIndexEnd-120;

                 currentIndexEnd-=60;

                for (let i = 0; i < childrens.length; i++) {
                    childrens[i].innerHTML = array[tempIndex + i];
                }
            }

        } else {

            if(currentIndexEnd+60<=240){


                for (let i = 0; i < childrens.length; i++) {
                    childrens[i].innerHTML = array[currentIndexEnd + i];
                }
                currentIndexEnd+=60;
            }
        }
        document.getElementById("pageIndex").innerText=currentIndexEnd/60;
    }


    function  getEmj(e) {

       let inputTarget=document.getElementById("chatInput");
       inputTarget.value=inputTarget.value+e.target.innerHTML;
    }


    function  SendMsg() {

        let inputCtrl=document.getElementById("chatInput");
        if(inputCtrl.value!=""&&!isEdit){

           let currentData=new Date();
           let mytime=currentData.toLocaleTimeString(); //获取当前时间
           let targetParent=document.getElementById("lineBox");
           let example=targetParent.children[0];
           let newItem=example.cloneNode(true);
           newItem.children[0].children[0].src=currentFace;
           newItem.children[1].innerHTML=curentNickName;
           newItem.children[2].innerHTML=mytime;
           newItem.children[3].innerHTML=inputCtrl.value;
           targetParent.appendChild(newItem);
           updateDate();

           let obj={

               nickname:curentNickName,
               userface:currentFace,
               chatcontent:inputCtrl.value,
               createtime:mytime
           }
           socket.emit("sendmsg",obj);
           inputCtrl.value="";
            ScrollToBotton();
        }else {
            return;
        }
    }


    //编辑事件
    function  edithEvent(e) {

        let currentImg = e.target;
        let inputTarget = document.getElementById("chatInput");
        if (!isEdit) {

            currentImg.src = "images/makesure.png";
            inputTarget.setAttribute("disabled", "disabled");


        } else {

            currentImg.src = "images/ediths.png";
            inputTarget.removeAttribute("disabled");
        }

        isEdit = !isEdit;

    }

    function  changeFaceEvent(e) {
        if(isEdit){

            let targetImg=e.target.src;
            document.getElementById("currentFace").src=targetImg;
            let url="/updateFace?url="+targetImg+"&nick="+curentNickName;
            http.open("GET",url,true);
            http.send();

            http.onreadystatechange=function()
            {
                if (http.readyState==4 && http.status==200){

                 console.log("Well");
                }
            }

        }
    }


    function updateDate() {

        let target=document.getElementById("lineBox");
        let currentLenght=target.children.length;
        let targetShow=document.getElementById("lenTag");
        targetShow.innerText=currentLenght;

    }

    function getTopic() {

        let url="/getTopic";
        http.open("GET",url,true);
        http.send();

        http.onreadystatechange=function()
        {
            if (http.readyState==4 && http.status==200)
            {

                let resultData=JSON.parse(http.responseText).data;
                if(resultData.status==undefined){
                    //成功

                   let target=document.getElementById("currentTopic");

                   target.innerHTML=resultData.topicContent;

                   let face=document.getElementById("face");
                   face.src=resultData.userFace;
                   let topname=document.getElementById("topname");
                   topname.innerHTML=resultData.nickName;
                   let topcreate=document.getElementById("topcreate");
                   topcreate.innerHTML=resultData.createTime;


                   //修正时间轴

                    let targetLine=document.getElementById("lineBox");
                    let nextnode=targetLine.children[1];
                    nextnode.children[0].children[0].src=resultData.userFace;
                    nextnode.children[1].innerHTML=resultData.nickName;
                    nextnode.children[2].innerHTML=resultData.createTime;
                    nextnode.children[3].innerHTML=resultData.topicContent;
                    getTheLineInfo();

                }else {
                    alert("时间轴还未准备就绪.....");

                 }
            }
        }
    }


    //抓取时间轴数据
    function getTheLineInfo() {


        let url = "/gettimelineInfo";
        http.open("GET", url, true);
        http.send();
        http.onreadystatechange = function () {

            if (http.readyState == 4 && http.status == 200) {

                let resultData=JSON.parse(http.responseText);
                let targetParent=document.getElementById("lineBox");


                for(let i=0;i<resultData.length;i++){

                    if(resultData[i].nickName=="wwww"){

                        let example=targetParent.children[0];
                        let newItem=example.cloneNode(true);
                        newItem.children[0].children[0].src=currentFace;
                        newItem.children[1].innerHTML=curentNickName;
                        newItem.children[2].innerHTML=resultData[i].createTime;
                        newItem.children[3].innerHTML=resultData[i].chatContent;
                        targetParent.appendChild(newItem);

                    }else{

                        let example=targetParent.children[1];
                        let newItem=example.cloneNode(true);
                        newItem.children[0].children[0].src=resultData[i].userFace;
                        newItem.children[1].innerHTML=resultData[i].nickName;
                        newItem.children[2].innerHTML=resultData[i].createTime;
                        newItem.children[3].innerHTML=resultData[i].chatContent;
                        targetParent.appendChild(newItem);

                    }
                }
                ScrollWell();
            }

            updateDate();
        }
    }

    function getPersonInfo() {

      let targetOne= document.getElementById("currentFace");
      currentFace=targetOne.getAttribute("src");
      let targetTwo=document.getElementById("username");
      curentNickName=targetTwo.innerHTML;
    }

    function ScrollWell() {

        let target=document.getElementById("chattingBox");
        let targetParent=document.getElementById("lineBox");
        let currentHeight=targetParent.offsetHeight;
        if(currentHeight>=window.innerHeight){

            targetParent.style.height=currentHeight+240+"px";
            let timer=null;
            let curOffsetHeight=0;

            timer=setInterval(()=>{

                if(curOffsetHeight<=currentHeight){

                    curOffsetHeight+=60;
                    target.scrollTop=curOffsetHeight;

                }else{

                    clearInterval(timer);
                    timer=null;
                }
            },20);
        }

    }

  </script>


  </body>
</html>
